<template>
	<view class="mainCon">
		<view class="tabHead" >
			<view class="tabItem" :class="current==index?'active':''" v-for="(item,index) in tabList"
				@click="tapChange(index)">
				{{item}}
			</view>
		</view>
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="dateLabel">
							车类型 : {{ item.cartype }}
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							联系方式 : {{ item.contactsway ? item.contactsway: '' }}
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelName">
							车号 : 
						</view>
						<view class="infoCon">
							{{ item.carcode ? item.carcode : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							核定载重 : 
						</view>
						<view class="infoCon">
							{{ item.load ? item.load : ' ' }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							车辆道路运输证号 : 
						</view>
						<view class="infoCon">
							<!-- {{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss') }} -->
							{{ item.transportnumber ? item.transportnumber : ' '}}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							车货总质量限值 : 
						</view>
						<view class="infoCon">
							{{ item.totalmass ? item.totalmass : ''}}
						</view>
					</view>
					<!-- <view class="infoCell">
						<view class="labelName">
							车辆类别 : 
						</view>
						<view class="infoCon">
							{{ item.carinfotypeid }}
						</view>
					</view> -->
					<view class="infoCell">
						<view class="labelName">
							轴型 : 
						</view>
						<view class="infoCon">
							{{ item.axialtype ? item.axialtype : ' '}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							驾驶员从业资格证号 : 
						</view>
						<view class="infoCon">
							{{ item.certificatenumber ? item.certificatenumber : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							驾驶员 : 
						</view>
						<view class="infoCon">
							{{ item.driver ? item.driver : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							道路运输经营者名称 : 
						</view>
						<view class="infoCon">
							{{ item.transportoperator ? item.transportoperator : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							审核状态 : 
						</view>
						<view class="infoCon">
							{{ item.checkstatus ? item.checkstatus : ' ' }}
						</view>
					</view>
					<view style="display: flex; justify-content: center; margin-top: 8px;" >
						<view class="btn" @click="toMoreInfo(item)">查看详细</view>
						<view class="btn" v-if="current == 0" @click="toModify(item)">审核通过</view>
						<view class="btn" v-if="current == 0" @click="toDel(item)">审核拒绝</view>
					</view>
				</view>
			</view>
		</view>

		<view style="margin-top: 200rpx;" v-if="orderList.length === 0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<u-popup v-model="show" width="100%" height="100%" :closeable="true">
			<view style="margin: 15px;">
				<view style="text-align: center;font-size: 20px;
						font-weight: 700;">
					详细信息
				</view>
				<view class="content">
					<view class="font">车号：{{ formData.carcode  ? formData.carcode: ' ' }}</view>
					<view class="font">核定载重：{{ formData.load  ? formData.load: ' ' }}</view>
					<view class="font">车辆类别：{{ formData.carinfotype  ? formData.carinfotype: ' ' }}</view>
					<view class="font">联系人：{{ formData.contacts  ? formData.contacts: ' ' }}</view>
					<view class="font">联系方式：{{ formData.contactsway  ? formData.contactsway: ' ' }}</view>
					<view class="font">道路运输经营者名称：{{ formData.transportoperator  ? formData.transportoperator: ' ' }}</view>
						
					<view class="font">车辆道路运输证号：{{ formData.transportnumber  ? formData.transportnumber: ' ' }}</view>
					<view class="font">挂车道路运输证号：{{ formData.trailernumber  ? formData.trailernumber: ' ' }}</view>
					<view class="font">轴型：{{ formData.axialtype  ? formData.axialtype: ' ' }}</view>
					<view class="font">车货总质量限值：{{ formData.totalmass  ? formData.totalmass: ' ' }}</view>
					<view class="font">驾驶员：{{ formData.driver  ? formData.driver: ' ' }}</view>
					<view class="font">驾驶员从业资格证号：{{ formData.certificatenumber  ? formData.certificatenumber: ' ' }}</view>
					<view class="font">送达地：{{ formData.delivery  ? formData.delivery: ' ' }}</view>
					
					<view class="font">货物装载源头单位联系电话：{{ formData.sourcetel  ? formData.sourcetel: ' ' }}</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="showModal" :content="content"  :title="title" :show-cancel-button="true"
			@confirm="throughConfirm" @cancel="showModal=false">
			<!-- <view style="text-align: center;">{{ content }}</view> -->
		</u-modal>
		
		<u-select mode="single-column" :list="partList" v-model="partListShow" @confirm="partListConfirm"
			value-name="value" label-name="value">
		</u-select>
		
		<u-select mode="single-column"  :list="carinfotypeList" v-model="carListShow" @confirm="carListConfirm"
			value-name="id" label-name="cartypename">
		</u-select>
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
					width: '200rpx'
				},
				tabList: ["待审核", "已通过", "未通过"],
				current: 0, 
				orderList: [],
				tel: "",
				flag: false,
				show: false,
				partListShow: false,
				carListShow: false,
				carinfotypeList: [],	// 车辆类别list
				carContent: '',
				showModal: false,
				title: '',
				objInfo: {},
				content: '',
				formData: {}
			};
		},
		onLoad() {
			//uni.getStorageSync("userInfo").mobile 15857953322
			this.getState1()
			this.getCarinfotypeid()
		},
		methods: {
			tapChange(index) {
				this.current = index
				if (index == 0) {
					this.getState1()		// 待审核0
				} 
				if (index == 1) {
					this.getState3()		// 已通过2
				}
				if (index == 2) {
					this.getState2()		// 已拒绝1
				}
			},
			// 车辆类别选择
			getCarinfotypeid() {
				uni.request({
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/yTPXFPc1EsPGSSy',
					method: "post",
					success: (res) => {
						console.log(res.data)
						this.carinfotypeList = res.data.rows
					}
				})
			},
			setList(status) {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					// ?contactsway=
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/xu8bDZaDK8P44os' + '?checkstatus=' + status,
					method: "post",
					success: (res) => {
						console.log(res.data)
						this.orderList = res.data.rows
						this.orderList.map(item => {
							if ( item.checkstatus == 0 ) {
								item.checkstatus = '待审核'
							} 
							if ( item.checkstatus == 2 ) {
								item.checkstatus = '已通过'
							}
							if ( item.checkstatus == 1 ) {
								item.checkstatus = '已回绝'
							}
							return item
						})
						uni.hideLoading()
					}
				})
			},
			// 待审核
			getState1() {
				this.setList(0)
			},
			// 拒绝
			getState2() {
				this.setList(1)
			},
			// 通过
			getState3() {
				this.setList(2)
			},
			// 查看详细
			toMoreInfo(item) {
				uni.request({
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/GozfwxxIHxzVkI0?id=' + item.id,
					method: 'post',
					success: (res) => {
						this.formData = res.data.rows[0]
						let obj = this.carinfotypeList.find(val => {
							return res.data.rows[0].carinfotypeid == val.id
						})
						this.formData.carinfotype = obj.cartypename

						this.show = true
					}
				})
			},
			// 通过
			toModify(item) {
				this.objInfo = item
				this.title = '确定审核通过吗？'
				this.showModal = true
			},
			// 审核拒绝
			toDel(item) {
				this.objInfo = item
				this.title = '确定审核拒绝吗？'
				this.showModal = true
			},
			throughConfirm() {
				if (this.title == '确定审核拒绝吗？') {
					uni.request({
						url: 'https://api.zlkj-port.com/cyapi/zlzg/U/g7hlr6ejNV78Jn4?auditor=' + 
						uni.getStorageSync("userInfo").nickName +
						'&id=' + this.objInfo.id + '&checkstatus=1',
						method: 'post',
						success: (res) => {
							this.showModal = false
							this.$refs.uTips.show({
								title: '审核拒绝！',
								type: 'success',
								duration: '2500'
							})
							this.getState1()
						}
					})
				} else if (this.title == '确定审核通过吗？') {
					uni.request({
						// http://localhost:8084/zlzg/U/AfXlppmE50ttOOE?auditor=admin&id=10598
						url: 'https://api.zlkj-port.com/cyapi/zlzg/U/g7hlr6ejNV78Jn4?auditor=' + 
						uni.getStorageSync("userInfo").nickName + 
						'&id=' + this.objInfo.id + '&checkstatus=2',
						method: 'post',
						success: (res) => {
							this.showModal = false
							this.$refs.uTips.show({
								title: '审核通过！',
								type: 'success',
								duration: '2500'
							})
							this.getState1()
						}
					})
				}
				
			}
			
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}
	.btn {
		background-color: rgb(25, 190, 107); 
		color: #fff; 
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		border-radius: 5px;
		margin-left: 10px;
	}
	.font {
		margin: 5px 0;
		font-size: 16px;
	}
	.btnGroup {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 15rpx;
	}
	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 20rpx;
			position: fixed;
			top: 0;
			width: 100%;
			// background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;
			margin-top: 100rpx;
			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #858585;
							font-size: 28rpx;
							margin-right: 50rpx;
							width: 280rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
